<template>
	<button
		:class="
			'custom-class theme-class zan-btn ' +
				(inGroup ? 'zan-btn--group' : '') +
				' ' +
				(isLast ? 'zan-btn--last' : '') +
				' ' +
				(size ? 'zan-btn--' + size : '') +
				' ' +
				(size === 'mini' ? 'zan-btn--plain' : '') +
				' ' +
				(plain ? 'zan-btn--plain' : '') +
				' ' +
				(type ? 'zan-btn--' + type : '') +
				' ' +
				(loading ? 'zan-btn--loading' : '') +
				' ' +
				(disabled ? 'zan-btn--disabled' : '')
		"
		:disabled="disabled"
		hover-class="button-hover"
		:open-type="openType"
		:app-parameter="appParameter"
		:hover-stop-propagation="hoverStopPropagation"
		:hover-start-time="hoverStartTime"
		:hover-stay-time="hoverStayTime"
		:lang="lang"
		:session-from="sessionFrom"
		:send-message-title="sendMessageTitle"
		:send-message-path="sendMessagePath"
		:send-message-img="sendMessageImg"
		:show-message-card="showMessageCard"
		@tap="handleTap"
		@contact="bindContact"
		@getuserinfo="bindGetUserInfo"
		@getphonenumber="bindGetPhoneNumber"
		@error="bindError"
		@opensetting="bindOpenSetting"
	>
		<slot></slot>
	</button>
</template>

<script>
export default {
	props: {
		type: {
			type: String,
			value: ''
		},
		size: {
			type: String,
			value: ''
		},
		plain: {
			type: Boolean,
			value: false
		},
		disabled: {
			type: Boolean,
			value: false
		},
		loading: {
			type: Boolean,
			value: false
		},
		//mixin
		// 在自定义组件中，无法与外界的 form 组件联动，暂时不开放
		// formType: String,
		openType: String,
		appParameter: String,
		// 暂时不开放，直接传入无法设置样式
		// hoverClass: {
		//   type: String,
		//   value: 'button-hover'
		// },
		hoverStopPropagation: Boolean,
		hoverStartTime: {
			type: Number,
			value: 20
		},
		hoverStayTime: {
			type: Number,
			value: 70
		},
		lang: {
			type: String,
			value: 'en'
		},
		sessionFrom: {
			type: String,
			value: ''
		},
		sendMessageTitle: String,
		sendMessagePath: String,
		sendMessageImg: String,
		showMessageCard: String
	},
	data() {
		return {
			inGroup: false,
			isLast: false
		};
	},
	methods: {
		handleTap(e) {
			if (this.disabled) {
				this.$emit('disabledclick', e);
				return;
			}
			this.$emit('btnclick', e);
		},
		switchLastButtonStatus() {
			var isLast = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
			this.isLast = isLast;
		},
		// 原生能力
		bindGetUserInfo() {
			let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
			let refDetail = ref.detail;
			let detail = refDetail === undefined ? {} : refDetail;
			this.$emit('getUserInfo', detail);
		},
		bindContact() {
			let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
			let refDetail = ref.detail;
			let detail = refDetail === undefined ? {} : refDetail;
			this.$emit('getContact', detail);
		},
		bindGetPhoneNumber() {
			let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
			let refDetail = ref.detail;
			let detail = refDetail === undefined ? {} : refDetail;
			this.$emit('getPhoneNumber', detail);
		},
		bindOpenSetting() {
			let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
			let refDetail = ref.detail;
			let detail = refDetail === undefined ? {} : refDetail;
			this.$emit('openSetting', detail);
		},
		bindError() {
			let ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
			let refDetail = ref.detail;
			let detail = refDetail === undefined ? {} : refDetail;

			this.triggerEvent('error', detail);
		}
	}
};
</script>

<style>
.zan-btn {
	position: relative;
	color: #333;
	background-color: #fff;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 2px;
	font-size: 16px;
	line-height: 45px;
	height: 45px;
	box-sizing: border-box;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
	overflow: visible;
}
.zan-btn--group {
	margin-bottom: 10px;
}
.zan-btn::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
	border: 0 solid #e5e5e5;
	border-width: 1px;
	border-radius: 4px;
}
.zan-btn--primary {
	color: #fff;
	background-color: #4b0;
}
.zan-btn--primary::after {
	border-color: #0a0;
}
.zan-btn--warn {
	color: #fff;
	background-color: #f85;
}
.zan-btn--warn::after {
	border-color: #f85;
}
.zan-btn--danger {
	color: #fff;
	background-color: #f44;
}
.zan-btn--danger::after {
	border-color: #e33;
}
.zan-btn--small {
	display: inline-block;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
}
.zan-btn--small.zan-btn--group {
	margin-bottom: 0;
	margin-right: 5px;
}
.zan-btn--mini {
	display: inline-block;
	line-height: 21px;
	height: 22px;
	font-size: 10px;
	padding-left: 5px;
	padding-right: 5px;
}
.zan-btn--mini.zan-btn--group {
	margin-bottom: 0;
	margin-right: 5px;
}
.zan-btn--large {
	border-radius: 0;
	border: none;
	line-height: 50px;
	height: 50px;
}
.zan-btn--large.zan-btn--group {
	margin-bottom: 0;
}
.zan-btn--plain.zan-btn {
	background-color: transparent;
}
.zan-btn--plain.zan-btn--primary {
	color: #06bf04;
}
.zan-btn--plain.zan-btn--warn {
	color: #f60;
}
.zan-btn--plain.zan-btn--danger {
	color: #f44;
}
.button-hover {
	opacity: 0.9;
}
.zan-btn--loading {
	color: transparent;
	opacity: 1;
}
.zan-btn--loading::before {
	position: absolute;
	left: 50%;
	top: 50%;
	content: ' ';
	width: 16px;
	height: 16px;
	margin-left: -8px;
	margin-top: -8px;
	border: 3px solid #e5e5e5;
	border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
	border-radius: 8px;
	box-sizing: border-box;
	-webkit-animation: btn-spin 0.6s linear;
	animation: btn-spin 0.6s linear;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.zan-btn--danger.zan-btn--loading::before,
.zan-btn--primary.zan-btn--loading::before,
.zan-btn--warn.zan-btn--loading::before {
	border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
}
@-webkit-keyframes btn-spin {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes btn-spin {
	0% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
.zan-btn.zan-btn--disabled {
	color: #999 !important;
	background: #f8f8f8 !important;
	border-color: #e5e5e5 !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}
.zan-btn.zan-btn--disabled::after {
	border-color: #e5e5e5 !important;
}
.zan-btn--group.zan-btn--last {
	margin-bottom: 0;
	margin-right: 0;
}
</style>
